import compileToFunction from "./compileToFunction.js";
import mountComponent from "./mountComponent.js";

export default function mount(vm) {
  if (!vm.$options.render) {
    // 如果没有render 就去编译,编译后会给render函数赋值
    let templateStr = "";
    const { el, template } = vm.$options;
    // 如果存在 template 表示是子组件
    if (template) {
      templateStr = template;
    } else if (el) {
      // el 存在 表示是挂载点 也就是根节点
      // <div id="app"></div>  outerHTML表示的整个标签  innerHTML表示里面的东西
      templateStr = document.querySelector(el).outerHTML;
      // 在实例上记录挂载点，记录我们得最外层的父元素, 也就是#app 子元素要插入到这里
      vm.$el = document.querySelector(el);
    }

    console.log("templateStr =======> ", templateStr);

    // 生成渲染函数
    const render = compileToFunction(templateStr);

    // 将渲染函数挂载到 $options 上
    vm.$options.render = render;
  }

  // render 函数处理完以后 处理它
  mountComponent(vm);
}
